<template>
  <view class="content">
    <!-- 设置密码 -->
    <view class="info fz30 bg-white">
      <view class="t-c">请选择您要使用的柜门编号</view>
      <view class="flex example">
        <view class="mr40 flex flex-y-center">可用</view>
        <view class="mr40 flex flex-y-center">占用</view>
      </view>
    </view>

    <!-- 柜子列表 -->
    <view class="list flex-wrap flex-x-center">
      <view
        class="item fz30 bdr10 t-c"
        v-for="item in state.dataSource"
        :key="item.id"
        :class="item.otherName === state.cellNum ? 'cur' : item.cellStatus !== '0' ? 'dis' : ''"
        @click="onSelect(item)"
      >
        {{ item.otherName }}
      </view>
    </view>

    <view class="fixed-btn">
      <view class="btn-box bg-white flex">
        <button class="btn flex1" @click="$jump.back()">返回</button>
        <button class="btn main-theme-bgcolor flex1 ml20 fff" form-type="submit" @click="formSubmit">确认</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { getCellByMainboardId } from '@/common/js/getData.js';
import { onLoad } from '@dcloudio/uni-app';

const { proxy } = getCurrentInstance();

const popupRef = ref(null);

const state = reactive({
  dataSource: [],
  cellType: '',
  cellNum: '',
  machineCellId: ''
});

// 页面加载完成
onLoad(async option => {
  await proxy.$onLaunched;
  state.cellType = option.cellType;
  state.cellNum = option.cellNum;
  loadData();
});

// 获取数据
const loadData = () => {
  const data = { mainboardId: getApp().globalData.mainboardId, cellType: state.cellType };
  getCellByMainboardId(data).then(res => {
    state.dataSource = res.result;
  });
};

// 选中格子
const onSelect = item => {
  if (item.cellStatus === '1') return;
  state.cellNum = item.otherName;
  state.machineCellId = item.id;
};

// 确认
const formSubmit = () => {
  const pages = getCurrentPages();
  if (pages && pages.length > 1) {
    uni.navigateBack({
      delta: 1 // 数量根据缓存的页面数量
    });
  }
  setTimeout(() => {
    proxy.$jump.redirectTo(`/pages/deposit/cellpay?cellType=${state.cellType}&cellNum=${state.cellNum}&machineCellId=${state.machineCellId}`);
  }, 100);
};
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.info {
  line-height: 60rpx;
  padding: 30rpx 40rpx;

  .example {
    .flex {
      &:before {
        content: '';
        width: 26rpx;
        height: 26rpx;
        margin-right: 10rpx;
        border-radius: 50%;
      }

      &:nth-child(1) {
        &:before {
          background: @green;
        }
      }

      &:nth-child(2) {
        &:before {
          background: #c8c8c8;
        }
      }
    }
  }
}

.list {
  position: relative;
  padding: 25rpx 0;

  .item {
    width: 215rpx;
    line-height: 120rpx;
    margin: 15rpx 10rpx;
    background: #fff;
    box-shadow: 2rpx 2rpx 5rpx rgba(#000, 0.1);

    &.cur {
      color: #fff;
      background: @green;
    }

    &.dis {
      background: #c8c8c8;
    }
  }
}

.fixed-btn {
  height: 172rpx;

  .btn-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
}
</style>
